
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>


  


 
        <h1 id="couser" >jQuery入门视频课</h1>
        <h2 id="teacher" >主讲 郭孟涛</h2>
        <h2 >一起学习 共同进步</h2>

        <p class="intro" >firsrt</p>
        <p class="intro" >内容：一起学习<b>jQuery</b>的选择器</p>
        <p class="info" >不同的方式选择内容</p>

        <a class="new" href="#">这是一个连接</a>
        <a id="jq12link" href="jquery-1.12.4.js">1.12.js</a>
        <a href="v.png">v.png</a>
        <a href="a.jpg">a.jpg</a>
        <a href="#">这是一个连接</a>
        <input id="title" type="text" value="Dom操作学习">

        <button id="gettitle">点击获取标题text内容</button> <p>        </p>
        <button id="getintro">点击获取标题html内容</button> <p>        </p>
        <button id="getform">点击获取val表单内容 -设置</button> <p>        </p>
        <button id="getattr">点击获取属性attr</button> <p>        </p>

        <script>

            $(document).ready(function(){
                $("#gettitle").click(function(){
                    // console.log("ok");
                    //  alert($("#teacher").text());
                    console.log($("#teacher").text());
                });
                $("#getintro").click(function(){
                     
                    console.log($(".intro").html());
                });
                $("#getform").click(function(){
                     
                    console.log($("#title").val());
                });
                $("#getattr").click(function(){
                     
                    console.log($("#title").attr("value"));
                    console.log($("#jq12link").attr("href"));
                    console.log($("#jq12link").attr("id"));
                });
            });


            // $().ready(function(){

            // });
            // $(function(){

            // });
        </script>
         
        <!-- <button id="gettext"  >获取内容text文本</button> <p><p/>
        <button id="gethtml"  >获取内容html文本</button> <p><p/>
        <button id="gettitle"  >获取内容value值</button> <p><p/>
        <button id="getattr"  >获取html属性的值</button> <p><p/>
        <button id="getattrvalue"  >获取html属性的值使用attr方法</button> 
  -->
         
    <!-- <script> 
         
        $(document).ready(function(){
            $("#gettext").click(function(){
                console.log($(".intro").text());
            })
            $("#gethtml").click(function(){
                console.log($(".intro").html());
            })

            $("#gettitle").click(function(){
                console.log($("#title").val());
            })


            $("#getattr").click(function(){
                console.log($("a").attr("href"));
            })
            $("#getattrvalue").click(function(){
                console.log($("#title").attr("value"));
            })




        })
    </script> -->
</body>
</html>